<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

</head>

<style>
    .ri{
        margin-left: -200px;
    }
</style>

<body>
    <!-- 头部导航 -->
    <div class="header_nav">
        <div class="nav_container">
           <a href="../index.html"> <img  style="height: 58px; width:200px" src="images/biaoti(1).png" alt=""></a>
            <ul>
                <li><a href="#" target="_blank">退出</a><a href="#" target="_blank">注册</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">下载APP</a></li>
                <li><a href="">资质证照/协议规则</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部中间 -->
    <div class="header_middle">
        <div class="middle_con">
            <h1><a href="#" target=""></a></h1>
            <li><a href="">有品秒杀</a><a href="">企业采购</a></li>
            <div class="box">
                <i class="iconfont icon-sousuokuang1 i-log"></i><input type="text" placeholder="电视" class="sear">
                <img src="images/QQ截图20220423181044.png" alt="" style="cursor: pointer;">
            </div>
        </div>
    </div>
    <!-- 小标题 -->
    <div class="small-title">
        <li><a href="">首页</a> > <a href="">购物车</a></li>
    </div>
    <!-- 购物车 -->
    <div class="main">
        <div class="main-con">
            <div class="main-con-title">
                <input type="checkbox" class="all-choose">
                <span class="all-txt">全选</span>
                <span class="product">商品信息</span>
                <span class="price">单价</span>
                <span class="num">数量</span>
                <span class="total">金额</span>
                <span class="edit">操作</span>
            </div>
            <div class="main-con-container" id="manager">
                <div class="main-con-title title">
                    <input type="checkbox" class="all-choose">
                    <span class="product">有品精选</span>
                    <span>!满69.00元免运费</span>
                </div>

            </div>
            <div class="bill bill-nav">
                <div class="bill-left">
                    <input type="checkbox" class="all-choose all-txt-bill">
                    <span class="all-txt ">全选</span>
                    <li><span>已选</span><i class="quantity">0件</i></li>
                </div>
                <div class="bill-right">
                    <p><span>合计:</span><i class="results">￥0.00</i></p>
                    <a class="go-bill" onclick="updateInfo()">去结算</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->

    <!-- 右边固定导航 -->
    <div class="fixed-right">
        <ul>
            <li class="connect">
                <a href="#!" class="con"></a>
                <p>联系客户</p>
                <div class="fixed-right-img"><img src="./images/qq.png" alt=""></div>
            </li>
            <li class="app">
                <a href="#!" class="con"></a>
                <p>下载APP</p>
                <div class="fixed-right-img1"><img src="./images/qq1.png" alt=""></div>
            </li>
            <li class="newman">
                <a href="#!" class="con"></a>
                <p>新人有礼</p>
                <div class="fixed-right-img2"><img src="./images/qq1.png" alt=""></div>
            </li>
            <li class="focus">
                <a href="#!" class="con"></a>
                <p>关注微信</p>
                <div class="fixed-right-img3"><img src="./images/qq1.png" alt=""></div>
            </li>
            <li class="return-top">
                <a href="#!" class="con"></a>
                <p>回到顶部</p>
            </li>
            <li class="focus1">
                <a href="#!" class="con" ></a>
                <p>添加点我</p>
                <div class="fixed-right-img4">
                    <img src="./images/qq1.png" alt="">
                </div>
            </li>
        </ul>
    </div>

</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/qs.js"></script>
<script src="./js/vue.js"></script>
<script>
    const urlParams = new URLSearchParams(window.location.search);
    const uname=urlParams.get('userName');
    const id=urlParams.get('userId');
    console.log(id+"++++++");
    console.log(urlParams+"++++++++++++++++++");
    // 获取 localStorage 中的用户值
/*    let id = localStorage.getItem('id');*/

    // 在另一个页面中使用用户值
    console.log(id); // 输出用户值

    show();
    function show() {
        $.ajax({
            url: '../cart?op=finds',
            type: 'get',
            dataType: "json",
            data: {
                userId:id
            },
            success: function (rs) {
                if (rs.code == 200) {
                    let mcd = rs.data
                    if (mcd.length > 0) {
                        mcd.forEach(function (dom) {
                            console.log(dom);
                            $('.main-con-container').append(`<div class="container-box">
            <input type="checkbox" class="radio">
            <i><img src="${dom.commodityPic.split(';')[0]}" alt=""></i>
            <p>${dom.cardId}</p>
            <p class="ri">${dom.commodityName}</p>
            <span>￥${dom.price}.00</span>
            <div class="add">
                <div class="add-boxs4 "></div>
                <strong class="reduce-five">一</strong>
                <i class="num-five number">${dom.quantity}</i>
                <strong class="adds-five">＋</strong>
            </div>
            <h5 class="money-five nowmoney">￥${dom.totalPrice}</h5>
            <a href="#" class="btn" title="删除" onclick="deleteGood('${dom.cardId}')">X</a>
        </div>`)
                        })
                        updateCheckboxes()
                        Autoplayadd(document.getElementsByClassName('reduce-five'), document.getElementsByClassName('num-five'), document.getElementsByClassName('adds-five'), document.getElementsByClassName('money-five'), document.getElementsByClassName('add-boxs4'));
                        Getmoney()
                        updateCheckboxListener()


                    };
                }
            }
        })
    }

    function updateInfo() {
        window.location.href='order.html?userId='+id+"&userName="+uname;
        var goods = [];

        // 遍历页面中所有商品信息，添加到goods数组中
        $('.container-box').each(function(index, dom) {
            var good = {
                cardId: $(dom).find('p:eq(0)').text(), // 获取第一个 <p> 元素的文本内容
                quantity: parseInt($(dom).find('.number').text()),
            }
            goods.push(good);
        });

        console.log(goods);

        $.ajax({
            url: '../cart?op=updata',
            type: 'post',
            dataType: 'json',
            data: { goods: goods ,lengths: goods.length},
            success: function(rs) {
                if (rs == 1) {
                    alert("更新成功");
                    show();
                }else {
                    alert("更新失败");
                }
            }
        });
    }

    function deleteGood(cardId){
         alert("heloo thwwg");
         console.log(cardId)
         axios({
             url: '../cart',
             method:'post',
             params:{cardId:cardId,op:'delete'}
         }).then(rs=>{
             if (rs.data.code == 200) {
                 alert("删除成功");
                 show();
             } else {
                 alert("error");
             }
         },'json')
     }


    function updateCheckboxListener() {
        $('.main-con-container').on('change', '.radio', function() {
            let selectedData = [];
            $('.radio').each(function() {
                // 判断是否被选中
                if ($(this).is(':checked')) {
                    // 获取选中行的其他元素
                    let container = $(this).closest('.container-box');
                    let commodityPic = container.find('i img').attr('src');
                    let cardId = container.find('p:eq(0)').text();
                    let commodityName = container.find('p:eq(1)').text();
                    let price = container.find('span').text().replace('￥', '');
                    let quantity = container.find('.number').text();
                    let totalPrice = container.find('.nowmoney').text().replace('￥', '');
                    let totalPrice1 = $('.bill-right .results').text().replace('￥', '');


                    // 将数据存储到数组中
                    let data = {
                        cardId: cardId,
                        commodityName: commodityName,
                        price: price,
                        quantity: quantity,
                        totalPrice: totalPrice,
                        commodityPic:commodityPic,
                        totalPrice1:totalPrice1

                    };
                    selectedData.push(data);
                }
            });
            localStorage.setItem('selectedData', JSON.stringify(selectedData));
        });

        $('.main-con').on('change', '.all-choose', function() {
            let selectedData = [];
            $('.radio').each(function() {
                // 判断是否被选中
                console.info("===================>")
                if ($(this).is(':checked')) {
                    // 获取选中行的其他元素
                   ntainer = $(this).closest('.container-box');
                    let commodityPic = container.find('i img').attr('src');
                    let cardId = container.find('p:eq(0)').text();
                    let commodityName = container.find('p:eq(1)').text();
                    let price = container.find('span').text().replace('￥', '');
                    let quantity = container.find('.number').text();
                    let totalPrice = container.find('.nowmoney').text().replace('￥', '');
                    let totalPrice1 = $('.bill-right .results').text().replace('￥', '');
                    // 将数据存储到数组中
                    let data = {
                        cardId: cardId,
                        commodityName: commodityName,
                        price: price,
                        quantity: quantity,
                        totalPrice: totalPrice,
                        commodityPic:commodityPic,
                        totalPrice1:totalPrice1
                    };
                    selectedData.push(data);
                }
            });
            localStorage.setItem('selectedData', JSON.stringify(selectedData));
        });
    }
</script>
</html>
